<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>预约界面</title>
    <!-- 引入样式 -->
    <link href="./plugins/Bootstrap4.6.1/css/bootstrap.css" rel="stylesheet">
    <link href="./favicon.ico" rel="shortcut icon" type="image/x-icon">
    <link href="./css/main.css" rel="stylesheet">
    <!-- 引入组件库 -->
    <script src="./plugins/js/jquery.js"></script>
    <script src="./plugins/Bootstrap4.6.1/js/bootstrap.bundle.js"></script>
    <script src="./plugins/js/vue.js"></script>
    <script src="./plugins/js/axios-0.18.0.js"></script>
</head>
<body>
<div id="app" class="orderList m-auto">
    <div v-if="userinfo.u_type==0">
        <button type="button" class="btn btn-primary m-3" style="width: 150px !important;" onclick="window.location.href='treash.html'">垃圾种类管理</button>
    </div>
    <h1 class="text-center">预约信息</h1>
    <button v-if="userinfo.u_type==1" @click="openModal(null,1)" type="button" class="btn btn-success orderAdd">预约</button>
    <table class=" m-auto table table-hover  table-bordered" >

        <thead>
        <tr>
            <th >序号</th>
            <th >垃圾种类</th>
            <th>预约人</th>
            <th >费用</th>
            <th >联系电话</th>
            <th >上门地址</th>
            <th >上门时间</th>
            <th >垃圾照片</th>
            <th >预约状态</th>
            <th >状态变更时间</th>
            <th >用户评分</th>
            <th >用户评价</th>
            <th >创建时间</th>
            <th >最后修改时间</th>
            <th >操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(order,index) in orders">
            <th scope="row">{{order.o_id}}</th>
            <td>{{order.t_type}}</td>
            <td>{{order.u_name}}</td>
            <td>{{order.recycle_price/100}}元</td>
            <td>{{order.u_phone}}</td>
            <td>{{order.o_address}}</td>
            <td>{{order.o_time}}</td>
            <td>
                <img v-if="order.imege" class="orderImg"  :src="order.imege" alt="">
            </td>
            <td>
                <span v-if="order.state==0">已提交</span>
                <span v-else-if="order.state==1">已撤回</span>
                <span v-else-if="order.state==2">通过审核</span>
                <span v-else-if="order.state==3">审核驳回</span>
                <span v-else-if="order.state==4">回收完成</span>
            </td>
            <td>{{order.finish_time}}</td>
            <td>{{order.score}}</td>
            <td>{{order.estimate}}</td>
            <td>{{order.create_time}}</td>
            <td>{{order.update_time}}</td>
            <td>
                <button v-if="userinfo.u_type==0&&order.state==0" @click="updateState(2,order.o_id)" type="button" class="btn btn-primary mb-2">通过</button>
                <button v-if="userinfo.u_type==1&&order.state==2" @click="updateState(4,order.o_id)" type="button" class="btn btn-primary mb-2">完成</button>
                <button v-if="userinfo.u_type==1&&order.state==4" @click="openModal(order,4)" type="button" class="btn btn-success mb-2">评价</button>
                <button v-if="userinfo.u_type==0&&order.state==0" @click="updateState(3,order.o_id)" type="button" class="btn btn-warning mb-2">驳回</button>
                <button v-if="userinfo.u_type==1&&order.state==0" @click="updateState(1,order.o_id)" type="button" class="btn btn-warning mb-2">撤销</button>
<!--                <button type="button" class="btn btn-danger">删除</button>-->
            </td>
        </tr>

        </tbody>
    </table>
    <!-- 模态框 -->
    <div class="modal fade   " id="addModal" tabindex="-1" >
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">{{order_one.title}}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div v-if="editFlag==4">
                    <div class="modal-body">
                        <form>
                            <div class="form-inline">
                                <label for="exampleInputEmail1">打分</label>
                                <input type="text" v-model="order_one.score" class="form-control " id="exampleInputEmail1" aria-describedby="emailHelp">
                            </div>
                            <div class="form-inline mt-3">
                                <label for="exampleInputPassword1">评价</label>
                                <input type="text" v-model="order_one.estimate" class="form-control " id="exampleInputPassword1">
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" @click="estimate()">确定</button>
                    </div>
                </div>

                <div v-if="editFlag==1">
                    <div class="modal-body">
                        <form id="addform" enctype="multipart/form-data">
                            <div class="form-inline mt-3">
                                <label for="exampleInputEmail1">垃圾类型</label>
                                <select class="form-control" v-model="order_one.t_id">
                                    <option v-for="(row,index) in treashs"    :value="row.t_id">{{row.t_type}}</option>
                                </select>
                            </div>
                            <div class="form-inline mt-3">
                                <label for="exampleInputEmail1">住址</label>
                                <input type="text" v-model="order_one.o_address"  class="form-control "  aria-describedby="emailHelp">
                            </div>
                            <div class="form-inline mt-3">
                                <label for="exampleInputEmail1">上门时间</label>
                                <input type="datetime-local" v-model="order_one.o_time" class="form-control " id="2" aria-describedby="emailHelp">
                            </div>
                            <div class="form-inline mt-3">
                                <label for="exampleInputEmail1">垃圾图片</label>
                                <input type="file" v-model="order_one.imege" name="imege" class="form-control form-control-file" id="1">
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" @click="addOrders()">确定</button>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            userinfo: {},
            orders: [],
            treashs:{},
            order_one:{
                t_id:'',
                o_address:'',
                o_time:'',
                imege:'',
                score:'',
                estimate:''
            },
            editFlag:0
        },
        created() {
            this.info();
        },
        methods: {
            info() {
                // 查询用户信息
                axios.get("userinfo.php?action=getSession").then(res => {
                    this.userinfo = res.data;
                    console.log(this.userinfo)
                }).finally(() => {
                    // 根据uid查询预约信息
                    var url = "orders.php?action=getlist";
                    axios.get(url).then(res => {
                        // console.log(res);
                        this.orders = res.data;
                    })
                })

            },
            updateState(state , o_id){  // 修改预约状态
                axios.get("orders.php?action=state&state="+state+"&o_id="+o_id).then(res=>{
                    alert(res.data>0?'操作成功':'操作失败');
                }).finally( this.info());
            },
            openModal(order,flag){
                this.order_one={};
                if(flag==4) {
                    this.editFlag=4;
                    this.order_one = order;
                    this.order_one.title='服务评价';
                }else if(flag==1) {
                    this.editFlag=1;
                    this.order_one.title='新增预约';

                    // 查询垃圾列表
                    axios.get("treash.php?action=getAll").then(res=>{
                        this.treashs = res.data;
                        console.log(this.treashs)
                    }).finally()

                }
                console.log(this.order_one)
                $('#addModal').modal('show')
            },
            estimate(){ // 评价
                console.log(this.order_one.score)
                console.log(this.order_one.score!=null)
                console.log(!(this.order_one.score>0&&this.order_one.score<=100))
                if(this.order_one.score==null||!(this.order_one.score>0&&this.order_one.score<=100)){
                    alert("评分在0-100之间的");
                    return;
                }
                if(this.order_one.estimate==null||this.order_one.estimate.trim().length < 5){
                    alert("评论要在5字以上");
                    return;
                }
                axios.post('orders.php?action=estimate',this.order_one).then(res=>{
                    alert(res.data>0?'操作成功':'操作失败');
                    $('#addModal').modal('hide');
                }).finally(this.info())
            },
            addOrders(){
                console.log($("#addform").serializeArray())
                axios.post('orders.php?action=add',this.order_one).then(res=>{
                    alert(res.data>0?'操作成功':'操作失败');
                    $('#addModal').modal('hide');
                }).finally(this.info())
            }
        }
    })
</script>
</html>